<template>
  <el-main>
    <div class="content-area">
      <el-row :gutter="10">
        <el-col :span="20" class="sparkboxes">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="box box1">
                <box-card></box-card>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="box box2">
                <box-card></box-card>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="box box3">
                <box-card></box-card>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="box box4">
                <box-card></box-card>
              </div>
            </el-col>
          </el-row>

            <div class="panel">
              <line-adwords></line-adwords>
            </div>

        </el-col>
        <el-col :span="4">
          <div class="panel panel-default quicktoolpanel">
            <div class="panel-heading">快捷维护</div>
            <div class="panel-body">
              <div class="quicktoolpanel_0">
                <div>
                  <el-button type="primary" @click="fileLogDialogVisible = true">文件日志</el-button>
                  <el-button type="primary" @click="queryLogDialogVisible = true">查询日志</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="queryLogDialogVisible" title="查询日志" width="70%" top="80px">
      <query-log-view></query-log-view>
    </el-dialog>
    <el-dialog v-model="fileLogDialogVisible" title="日志文件">
      <file-log-view></file-log-view>
    </el-dialog>
  </el-main>
</template>

<script>
import FileLogView from '@/components/log/fileLog'
import queryLogView from "@/components/log/queryLog";
import VisitsChart from "@/components/home/VisitsChart";
import LineAdwords from "@/components/home/LineAdwords";
import BoxCard from "@/components/home/BoxCard";

export default {
  name: "index",
  components: {
    BoxCard,
    LineAdwords, VisitsChart, FileLogView, queryLogView
  },
  data() {
    return {
      fileLogDialogVisible: false,
      queryLogDialogVisible: false
    }
  },
  methods: {},
  mounted() {

  }
}
</script>

<style scoped>
h1, h2, h3, h4, h5, h6, strong {
  font-weight: 600;
}

body {
  /*background: linear-gradient(45deg,#3a3a60,#5f5f8e);
  min-height: 100vh;*/
}

.content-area {
  max-width: 1280px;
  margin: 0 auto;
}

.box {
  background-color: #2B2D3E;
  padding: 25px 20px;
}

.shadow {
  box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
}

.sparkboxes .box {
  padding-top: 10px;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px 1px #666;
  box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
  position: relative;
  border-radius: 5px;
}

.sparkboxes strong {
  position: relative;
  z-index: 3;
  top: -8px;
  color: #fff;
}


.sparkboxes .box1 {
  background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
}

.sparkboxes .box2 {
  background-image: linear-gradient(135deg, #2AFADF 10%, #4C83FF 100%);
}

.sparkboxes .box3 {
  background-image: linear-gradient(135deg, #FFD3A5 10%, #FD6585 100%);
}

.sparkboxes .box4 {
  background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%);
}

</style>
